<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./css/index.css" rel="stylesheet">
</head>
<body>

<!-- 主体区域 -->
<section id="app">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑子记事本</h1>
        <input @keyup.enter="add" class="new-todo" placeholder="请输入任务" v-model.trim="todoName"/>
        <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li :key="item.id" class="todo" v-for="(item,index) in List">
                <div class="view">
                    <span class="index">{{index + 1}}.</span> <label>{{item.name}}</label>
                    <button @click="destroy(item.id)" class="destroy"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-if="List.length > 0">
        <!-- 统计 -->
        <span class="todo-count">合 计:<strong> {{ List.length }} </strong></span>
        <!-- 清空 -->
        <button @click="List = []" class="clear-completed">
            清空任务
        </button>
    </footer>
</section>

<script src="../vue.global.js"></script>

<script>
    const {createApp, ref} = Vue;
    createApp({
        setup() {
            const todoName = ref("");

            const List = ref([
                {id: 1, name: "吃饭饭"},
                {id: 2, name: "睡觉觉"},
                {id: 3, name: "打豆豆"},
                {id: 4, name: "打豆豆"}
            ]);

            const add = () => {
                if (todoName.value.trim() === "") {
                    return alert("请输入任务,任务不能为空");
                }

                List.value.unshift({
                    id: +new Date(),
                    name: todoName.value
                });
                todoName.value = "";
            }

            const destroy = (id) => {
                List.value = List.value.filter(item => item.id !== id);//item=>item.id !== id是箭头函数，箭头函数的参数是item，返回的是item.id !== id
            }

            return {todoName, List, add, destroy};
        }
    }).mount('#app');
</script>


</body>
</html>